<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 1.导入模板引擎，在window全局会多一个template函数（‘模板的id’，需要渲染的数据对象） -->
  <script src="./lib/template-web.js"></script>
  <script src="./lib/jquery.js"></script>
</head>

<body>

  <div id="container"></div>

  <!-- 3. 定义模板 -->
  <!-- 3.1 模板的html结构必须定义到script标签中 -->
  <script type="text/html" id="tpl-user">
    <h1>{{name}}----{{age}}</h1>
    <!-- 原文输出  -->
    <!-- 如果要输出的value 值中,包含了HTML标签结构,则需要使用原文输出语法,才能保证HTML标签被正常渲染 -->
    {{@ test}}

    <div>
      <!-- 条件输出 -->
      {{if flag === 0}}
        flag的值是0
      {{else if flag === 1}}
        flag的值是1
      {{/if}}
    </div>

    <ul>
      {{each hobby}}
        <li>索引是：{{$index}},循环项是：{{$value}}</li>
      {{/each}}
    </ul>

    <h3>{{regTime | dateFormat}}</h3>
  </script>

  <script>
    // 定义处理时间过滤器
    template.defaults.imports.dateFormat = function (date) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()

      return y + '-' + m + '-' + d
    }

    // 2.定义需要渲染的数据
    var data = { name: 'zs', age: 20, test: '<h3>测试原文输出</h3>', flag: 1, hobby: ['吃饭', '睡觉', '写代码'], regTime: new Date() }

    // 4.调用template函数
    var htmlStr = template('tpl-user', data)
    console.log(htmlStr);
    // 5.渲染html结构
    $('#container').html(htmlStr)
  </script>
</body>

</html>